<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const lineChartRef = ref(null)

function draw() {
  let myChart = echarts.init(lineChartRef.value)

  let option = {
    title: {
      text: '疾病类型（DIP分组）',
      textStyle: {
        fontWeight: 'normal',
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '1病组',
        '2病组',
        '3病组',
        '4病组',
        '5病组',
        '6病组',
        '7病组',
        '8病组',
        '9病组',
        '1病组',
        '2病组',
        '3病组',
        '4病组',
        '5病组',
        '6病组',
        '7病组',
      ],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210, 134, 90, 120, 132, 101, 134, 90, 230],
        itemStyle: {
          color: '#5EB46B',
        },
      },
    ],
  }

  myChart.setOption(option)
}

onMounted(() => {
  draw()
})
</script>

<template>
  <div ref="lineChartRef" class="line-chart"></div>
</template>

<style scoped>
.line-chart {
  min-width: 800px;
  width: 63.5%;
  height: 220px;
  background: var(--vt-c-white);
  padding: 10px;
}
</style>
